<template>
  <div class="retrievePassword">
    <div class="password-box">
      <div class="title">{{$t('retrievePassword.title')}}</div>
      <div class="text-box">
        <div class="text-tip">{{$t('retrievePassword.tip')}}</div>
        <div class="login-form">
          <div class="form-row">
            <!-- 手机号码 -->
            <input
              v-model.trim="model.username"
              autofocus="true"
              @keyup.13="handleLogin"
              :placeholder="$t('retrievePassword.placeholder.username')"
              class="form-input-zf"
            />
          </div>

          <!-- <div class="form-row">
            <input
              v-model.trim="model.mobilePhone"
              @keyup.13="handleLogin"
              :placeholder="$t('retrievePassword.placeholder.mobilePhone')"
              class="form-input-zf"
            />
          </div> -->

          <div class="form-row">
            <!-- 请输入E-mall -->
            <input
              v-model.trim="model.email"
              @keyup.13="handleLogin"
              :placeholder="$t('retrievePassword.placeholder.email')"
              class="form-input-zf"
            />
          </div>
          <div class="btn-login" style="margin-top: 15px;">
            <el-button
              type="primary"
              class="button-tj"
              :loading="loading"
              @click.native="handleLogin"
              >{{$t('button.submit')}}
            </el-button>
          </div>
          <div class="button-tip" @click="goto">{{$t('retrievePassword.tip1')}}</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { resetSecert } from '@/api/login'
export default {
  name: 'retrievePassword',
  data() {
    return {
      model: {
        username: '',
        mobilePhone: '',
        email: ''
      },
      loading: false,
      showDialog: false
    }
  },
  methods: {
    handleLogin() {
      console.log(this.model, '111111111111')
      const { username, mobilePhone, email } = this.model;
      resetSecert(username, mobilePhone, email).then(response => {
        this.$notify({
          title: response.status === 200 ? '成功' : '失败',
          message: response.message,
          type: response.status === 200 ? 'success' : 'warning'
        });
      })
      console.log(...this.model)
    },
    goto() {
      this.$router.push({ path: '/login' })
    }
  },
  created() {
    // window.addEventListener('hashchange', this.afterQRScan)
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">

/* reset element-ui css */
.retrievePassword {
  // position: relative;
  background-color: #f1f5f4;
  height: 100%;
}
.password-box{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate( -50%,-50%);
  min-width: 330px;
  max-width: 996px;
  width: 60%;
  height: 430px;
  background-color: #fff;
  border-radius: 5px;
  .title{
    text-align: center;
    height: 64px;
    line-height: 64px;
    color: #fff;
    font-size: 20px;
    background: linear-gradient(90deg, #328fe1, #32bc8e);
  }
  .login-form{
    width: 320px;
    margin: 0 auto;
  }
  .form-input-zf{
    margin: 10px 0;
    padding: 0 15px;
    border-radius: 5px;
    border: 1px solid #d9d9d9;
    color: #646464;
    font-size: 14px;
    width: 100%;
    height: 36px;
  }
  .text-box{
    .text-tip{
      margin: 25px 0 15px 0;
      color: #646464;
      font-size: 12px;
      text-align: center;
    }
    .button-tj{
      border-radius: 5px;
      width: 100%;
      height: 36px;
      background-color: #32bc8e;
      color: #fff;
      font-size: 16px;
      border: none;
    }
    .button-tip{
      margin: 25px 0;
      color: #32bc8e;
      font-size: 12px;
      text-align: center;
      text-decoration: underline;
      cursor: pointer;
    }
  }
}
</style>
